import React, { useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { ModalForm, PageContainer, ProFormText, ProTable, ProFormUploadButton } from '@ant-design/pro-components';
import { Button, message, Image, Popconfirm } from 'antd';
import errorImage from '@/assets/error.png';
import _ from '@/assets/utils';
import MODEL_API from '@/services/model';
import styled from 'styled-components';
import { history, useSearchParams, useModel, Helmet } from '@umijs/max';
const RightStyle = styled.div`
    .ant-pro-table-list-toolbar-right   {
  margin-right: 1100px;
}
`;
const Goods = function Goods() {
     const  [selectList, setSelectList] = useState([]),//存批量选中的id
        tableIns = useRef(); //刷新页面的
    const columns = [{
        title: '商品编号',
        dataIndex: 'goodsId',
        width: '12.5%',
    }, {
        title: "商品名",
        dataIndex: 'goodsName',
        width: '12.5%',
    }, {
        title: '商品简介',
        dataIndex: 'goodsIntro',
        width: '12.5%',
    }, {
        title: '商品图片',
        dataIndex: 'goodsCoverImg',
        width: '12.5%',
        render: (dom) => {
            return <Image
                width={60}
                height={60}
                src={dom}
                fallback={errorImage}
            />;
        }
    }, {
        title: '商品库存',
        dataIndex: 'stockNum',
        width: '12.5%',
    }, {
        title: '商品售价',
        dataIndex: 'sellingPrice',
        width: '12.5%',
    }, {
        title: '上架状态',
        dataIndex: 'goodsSellStatus',
        //0是销售中 1是下架了
        width: '12.5%',
        render: (_, record) => {
            let { goodsSellStatus } = record;
            // setNum([goodsSellStatus])
            if (goodsSellStatus === 0) {
                return <div style={{ color: 'green' }}>销售中</div>
            } else {
                return <div style={{ color: 'red' }}>已下架</div>
            }
        }
    }, {
        title: '操作',
        width: '12.5%',
        render: (_, record) => {
            let { goodsSellStatus, goodsId } = record;
            return [
                <Button key="update" type="link"
                    onClick={
                         () => {
                        history.push({
                            pathname: '/dashboard/add',
                            query: {
                              to:  goodsId
                            }
                          });
                    }}>
                    修改
                </Button>,
                <Button key="delate" type="link"
                    onClick={async () => {
                        if (goodsSellStatus === 0) {
                            let { resultCode } = await MODEL_API.downShop([goodsId])

                            if (+resultCode === 200) {
                                message.success('下架成功');
                                tableIns.current.reload();
                            }

                        } else {
                            let { resultCode } = await MODEL_API.putShop([goodsId]);
                            if (+resultCode === 200) {
                                message.success('上架成功');
                                tableIns.current.reload();
                            }
                        }

                    }}>
                    {goodsSellStatus === 0 ? '下架' : '上架'}
                </Button>
            ];
        }
    }]



    /* 表格数据的处理 */
    const queryTableData = async ({ current, pageSize }) => {
        let tableData = [],
            total = 0;
        try {
            let { resultCode, data } = await MODEL_API.goodsList(current, pageSize);
            if (+resultCode === 200) {
                total = +data.totalCount;
                tableData = data.list;
            }
        } catch (_) { }
        // 不论请求成功还是失败，都让表格进行渲染
        return {
            success: true,
            data: tableData,
            total
        };
    };


    return <PageContainer>
<RightStyle>
        <ProTable
            request={queryTableData}
            columns={columns}
            search={false}
            options={{
                density: false,
                reload: false,
                setting: false
            }}
            pagination={{
                pageSize: 10,
                hideOnSinglePage: false,
                showTotal: false,
                showQuickJumper: false,
                showSizeChanger: false
            }}
            toolBarRender={() => {
                return [
                    <Button key="new" type="primary"
                        onClick={() => {
                            history.push('/dashboard/add');
                        }}
                    >
                        <PlusOutlined /> 新增商品
                    </Button>
                ];
            }}
            actionRef={tableIns}
            rowKey="goodsId"
            rowSelection={{
                onChange: (selectedIds) => setSelectList(selectedIds)
            }}
        />
        </RightStyle>
    </PageContainer>;
};
export default Goods;